<template>
  <section class="todoapp">
    <tobu @fachu="dianji" />
    <zhongjian :arr="Addshow" @shanchu="btn" />
    <weibu :arr="list" @Add="qiehun" @suoyou="suoyoe" />
  </section>
</template>

<script>
import "./css/base.css";
import "./css/index.css";
import tobu from "./comporing/tobu.vue";
import zhongjian from "./comporing/zhongjian.vue";
import weibu from "./comporing/weibu.vue";

export default {
  data() {
    return {
      agest: "all",
    //   
      list: JSON.parse(localStorage.getItem('listsong')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  components: {
    tobu,
    zhongjian,
    weibu,
  },
  watch: {
      list:{
          deep:true,
        handler(){
            localStorage.setItem('listsong',JSON.stringify(this.list))
        }
      }
  },
  methods: {
    dianji(name) {
      let obj = {
        id: Math.ceil(Math.random() * 1000),
        name,
        isDone: "false",
      };
      this.list.push(obj);
    },
    btn(i) {
      if (window.confirm("确认删除此数据吗？")) {
        this.list.splice(i, 1);
      }
    },
    qiehun(liso) {
      this.agest = liso;
    },
    suoyoe() {
      if (window.confirm("确认全部删除数据吗？")) {
        // this.list.splice(this.list);
        this.list = this.list.filter((obj) => obj.isDone === false);
      }
    },
  },
  computed: {
    Addshow() {
      if (this.agest === "yes") {
        return this.list.filter((obj) => obj.isDone === true); //显示已完成的
      } else if (this.agest === "no") {
        return this.list.filter((obj) => obj.isDone === false); //显示未完成的
      } else {
        return this.list; //显示全部显示
      }
    },
  },
};
</script>

<style>
</style>